<!--<body>
    <div class="xuetiao">
        <span></span>
    </div>
<link rel="stylesheet" href="./demo.css">
</body>
<script src="./demo.js"></script>-->

<style>
    * {padding:0;margin:0}
    html,body {
        height: 100%;
        background-color: black;
    }
    .xuetiao {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 50px;
    border: solid 5px yellow;
}
    .xuetiao span {
    width: 100px;
    height: 50px;
    background-color: red;
    display: block;
}
</style>
<body>
    <div class="xuetiao">
        <span></span>
    </div>
</body>



<script>

document.onclick = function (evt){
    var e = evt || window.event
    var target = e.target ||e.srcElement
    if(target.nodeName = 'IMG'){
        document.body.removeChild(target)
    }
}

function random(min,max){
        return Math.floor(Math.random() * (max-min+1)+min)
    }

    t=setInterval(function(){
        var imgobj = document.createElement('img')
        imgobj.src = './star.gif'
        var w = random(50,50)
        imgobj.height = w
        imgobj.width = w
        imgobj.style.position = 'absolute'

        var maxw = (window.innerWidth||document.documentElement.clientWidth) - w
        var maxh = (window.innerHeight||document.documentElement.clientHeight) - w

        var l = random(0,maxw)
        var h = random(0,maxh)
        imgobj.style.left = l + 'px'
        imgobj.style.top = h + 'px'
        document.body.appendChild(imgobj)
    },1000)

    var num = 100
    setInterval(function(){
    var spanobj = document.querySelector('span')
    num--
    spanobj.style.width = num + 'px'
    if(num<=0 ){
        alert('gameover')
        clearInterval(t)
    }
    },100)
</script>
